<template>
  <div class="header">
    <div class="title">高级搜索</div>
    <div class="form">
      <el-form :model="current" ref="formData">
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label-width="80px" label="活动编号:">
              <el-input placeholder="请输入" v-model="current.code"></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="渠道来源:">
              <el-input
                placeholder="请输入"
                v-model="current.channelSource"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="创建日期:">
              <el-date-picker
                v-model="value11"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changEstablish"
              >
              </el-date-picker></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label-width="80px" label="活动日期:">
              <el-date-picker
                v-model="value22"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changActivity"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="16"> </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: end">
          <el-form-item>
            <el-button type="info" size="large" round @click="reset">重置</el-button>
            <el-button type="primary" size="large" round @click="search">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
  <div class="found" style="padding: 20px 20px 40px 20px; background-color: #fff">
    <el-button type="primary" style="padding: 20px" size="large" round @click="dialogVisible = true"
      >创建活动</el-button
    >
  </div>
  <div class="table">
    <el-table :data="list" style="width: 100%" :row-key="getRowKeys">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="code" label="活动编号" width="100px" />
      <el-table-column prop="channelSource" label="渠道来源" width="180" />
      <el-table-column prop="actBrief" label="活动简介" />
      <el-table-column prop="actDetail" label="活动明细" />
      <el-table-column prop="createTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="business(row)">编辑</el-button>
          <el-button type="text" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demonstration">
      <el-config-provider :locale="locale">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="current.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-config-provider>
    </div>
  </div>

  <constructive-activity
    v-model:dialogVisible="dialogVisible"
    @getListApi="getListApi"
    ref="addRoleRef"
  ></constructive-activity>
</template>
<script setup>
import locale from 'element-plus/lib/locale/lang/zh-cn'
import { getList, deleteList } from '@/api/basicDataMaintenance.js'
import { ref, onMounted } from 'vue'
import ConstructiveActivity from './components/ConstructiveActivity.vue'
const current = ref({
  code: '',
  channelSource: '',
  beginTime: '',
  endTime: '',
  createTime: '',
  endCreateTime: '',
  pageNum: 1,
  pageSize: 10
})
const list = ref([])
const total = ref(null)

const getListApi = async () => {
  const res = await getList(current.value)
  list.value = res.data.records

  console.log(list.value)
  total.value = res.data.total

  list.value.forEach((item) => {
    const date = new Date(item.createTime)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    item.createTime = `${year}-${'0' + month}-${day}`
    const date1 = new Date(item.endTime)
    const year1 = date1.getFullYear()
    const month1 = date1.getMonth() + 1
    const day1 = date1.getDate()
    item.endTime = `${year1}-${'0' + month1}-${day1}`
  })
}

onMounted(() => {
  getListApi()
})
const value11 = ref('')
const value22 = ref('')
const changEstablishArr = ref([])
const changActivityArr = ref([])
//创建
const changEstablish = () => {
  if (value11.value) {
    changEstablishArr.value = value11.value.map((item) => {
      const date = new Date(item)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return (item = `${year}-${'0' + month}-${day}`)
    })
  }
  current.value.createTime = changEstablishArr.value[0]
  current.value.endTime = changEstablishArr.value[1]
}
//活动
const changActivity = () => {
  if (value11.value) {
    changActivityArr.value = value11.value.map((item) => {
      const date = new Date(item)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return (item = `${year}-${'0' + month}-${day}`)
    })
  }
  current.value.createTime = changActivityArr.value[0]
  current.value.endTime = changActivityArr.value[1]
}

const dialogVisible = ref(false)
const search = () => {
  getListApi()
}
const formData = ref(null)
const reset = () => {
  current.value.code = ''
  current.value.channelSource = ''
  value11.value = ''
  value22.value = ''
  getListApi()
}
const handleCurrentChange = (val) => {
  current.value.pageNum = val
  console.log(current.value.pageNum)
  getListApi()
}
const handleSizeChange = (val) => {
  console.log(val)
  current.value.pageSize = val
  getListApi()
}
const addRoleRef = ref(null)
const business = (row) => {
  dialogVisible.value = true
  addRoleRef.value.updataListApi(row)
}
const del = async (id) => {
  await deleteList(id)
  getListApi()
}
</script>
<style scoped lang="scss">
.header {
  padding: 0 20px;
  background-color: #fff;
  .title {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
  .form {
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border: 1px solid rgb(224, 224, 224);
  }
}
.table {
  background-color: #fff;
  padding: 15px;
}
.demonstration {
  display: flex;
  justify-content: end;
  margin-top: 15px;
}
.footer {
  padding: 0 20px;
  background-color: #fff;
  .footer_left {
    border: 1px solid rgb(197, 196, 196);
    padding: 10px;
  }
  .footer_right {
    border: 1px solid rgb(197, 196, 196);
    padding: 10px;
  }
}
::deep(.el-input) {
  width: 100% !important;
}
</style>
